<template>
  <div id="app"   >
    <keep-alive :exclude="['BoFangQi']">
    <transition name="slide" mode="out-in">
      <router-view  @playAudioId="AudioUpdata" :songXiangqing="song" :AudioplaysongId="AudioplaysongId"
        :playing="btnShow" @playsong="$refs.Appaudio.play()" @pauessong="$refs.Appaudio.pause()" @nextsong="nextsong"
        @Previoussong="Previoussong" :songoverTime="songoverTime" :songoldTime="songoldTime"
        @changeSongTime="changeSongTime" :songlist="songlist" @delsong="delsong" @addsonglist="addsonglist"
        @Playlistmuc="AudioUpdata" @playsonglistall="playsonglistall"  style="position: absolute; top:0;left: 0;"/>
    </transition>
  </keep-alive>

    <audio autoplay style="display:none; height: 50px" controls
      :src="`https://music.163.com/song/media/outer/url?id=${AudioplaysongId}.mp3`" ref="Appaudio"
      @playing="btnShow = true" @pause="btnShow = false" @ended="nextsong"
      @durationchange="songoverTime = $event.target.duration"
      @timeupdate="songoldTime = $event.target.currentTime"></audio>

    <BoFang :btnShow="btnShow" @nextsong="nextsong" @Previoussong="Previoussong" @playsong="$refs.Appaudio.play()"
      @pauessong="$refs.Appaudio.pause()" @delsong="delsong" @Playlistmuc="AudioUpdata" :Audioplaysong="song"
      :songlist="songlist" :AudioplaysongId="AudioplaysongId" :playing="btnShow" class="Appaudio">
    </BoFang>

    <!-- <div v-show="songName" class="songplay">
      <div style="margin-top: 20px;">是否要直接播放歌曲<span style="color: red;font-weight: 700;"> {{ songName }} </span>?</div>
      <div class="songplay-btn">
        <div @click="playSo('Yes')">确认</div>
        <div @click="playSo('No')">取消</div>
      </div>

    </div> -->
  </div>
</template>

<script>
import BoFang from "./components/BoFang.vue";

export default {
  components: {
    BoFang,
  },
  data() {
    return {
      songoverTime: 0,
      songoldTime: 0,
      AudioplaysongId: null,
      btnShow: false,
      songName: null,
      song: null,
      songlist: JSON.parse(localStorage.getItem("songlist")) || [],
      songlistindex: JSON.parse(localStorage.getItem("songlistindex")) || 0,
    };
  },

  methods: {
    changeSongTime(time) {
      this.$refs.Appaudio.currentTime = time;
    },


    // 播放歌单
    playsonglistall(playsonglist) {
      console.log(playsonglist);
      
      this.songlist = [...playsonglist]

      this.AudioplaysongId = this.songlist[0]?.id ;
      this.song = this.songlist[0];
      this.songName = this.songlist[0]?.name;
    },

    // 加入列表并播放
    AudioUpdata(item) {

      // console.log("app", item);

      this.AudioplaysongId = item.id;
      this.song = item;
      this.songName = item.name;
      // let arrs = [...this.songlist];
      // // 查重
      // const existingItemIndex = arrs.findIndex((song) => song.id === item.id);
      // if (existingItemIndex === -1) {
      //   arrs.push(item);
      // } else {
      //   arrs[existingItemIndex] = item;
      // }

      // this.songlist = arrs;

      // let songidx = this.songlist.findIndex(function (itm) {
      //   return itm.id === item.id;
      // });
      // console.log("当前",this.song);
      // console.log("列表", this.songlist);
      // this.songlistindex = songidx;
    },

    // 加入播放列表
    addsonglist(item) {
      let arrs = [...this.songlist];
      // console.log("app", item);



      // 查重
      const existingItemIndex = arrs.findIndex((song) => song.id === item.id);

      if (existingItemIndex === -1) {
        arrs.push(item);
      } else {
        arrs[existingItemIndex] = item;
      }

      this.songlist = arrs;

      
      console.log("列表", this.songlist);
      // let songidx = this.songlist.findIndex(function (itm) {
      //   return itm.id === item.id;
      // });
      // console.log("当前",this.song);
      // this.songlistindex = songidx;

      // this.songName = item.name;
    },



    playSo(val) {
      switch (val) {
        case "Yes":
          this.$refs.Appaudio.play();
          this.songName = null;
          break;
        case "No":
          this.$refs.Appaudio.pause();
          this.btnShow = false;
          this.songName = null;

          break;

        default:
          break;
      }
    },
    nextsong() {


      if (
        this.songlist.length > 1 &&
        this.songlistindex < this.songlist.length - 1
      ) {
        this.songlistindex++;
        this.AudioplaysongId = this.songlist[this.songlistindex].id;
        this.song = this.songlist[this.songlistindex];
      } else if (this.songlist) {
        this.songlistindex = 0;
        this.AudioplaysongId = this.songlist[this.songlistindex].id;
        this.song = this.songlist[this.songlistindex];
      } else {
        console.log("列表暂无歌曲");

      }
      // console.log("下一首", this.songlist);
    },
    Previoussong() {
      if (this.songlist.length > 1 && this.songlistindex > 0) {
        this.songlistindex--;
        this.AudioplaysongId = this.songlist[this.songlistindex].id;
        this.song = this.songlist[this.songlistindex];
      } else if (this.songlist) {
        this.songlistindex = this.songlist.length - 1;
        this.AudioplaysongId = this.songlist[this.songlistindex].id;
        this.song = this.songlist[this.songlistindex];
      } else {
        console.log("列表暂无歌曲");

      }
    },
    delsong(id) {
      console.log("传输删除id", id);
      this.songlist = this.songlist.filter((item) => item.id !== id);
    },
  },

  created() {
    this.AudioplaysongId = this.songlist[this.songlistindex]?.id||0;
    this.song = this.songlist[this.songlistindex];
  },
  watch: {
    songlist(newV) {
      localStorage.setItem("songlist", JSON.stringify(newV));
    },
    songlistindex(newV) {
      localStorage.setItem("songlistindex", newV);
    },
    // song() {
    //   // this.$refs.Appaudio.pause();
    //   this.btnShow = false;
    // },
  },
};
</script>

<style>
html::-webkit-scrollbar {
  width: 0;
  height: 0;
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  width: 0;
  height: 0;
  scrollbar-width: none;
}
</style>

<style lang="less">
/* 进入路由的动画 */
.slide-enter-active {
  animation: slide-in 0.4s;
}

.slide-leave-active {
  animation: slide-out 0.2s;
}

.slide-enter,
.slide-leave-to

/* .slide-leave-active in <2.1.8 */
  {
  transform: translateX(100%);
}

@keyframes slide-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-out {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100%);
  }
}


#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
}

.Appaudio {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 60px;
}

.songplay {
  width: 80vw;
  height: 10vh;
  background-color: white;
  position: fixed;
  top: calc(50% - 5vh);
  left: calc(50% - 40vw);
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ccc;
  border-radius: 5px;

  .songplay-btn {
    width: 100%;
    display: flex;

    div {
      width: 50%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-weight: 700;
    }

    div:nth-of-type(1) {
      background-color: rgb(72, 255, 0);
      color: white;
    }

    div:nth-of-type(2) {
      background-color: red;
      color: white;
    }
  }
}

nav {
  display: flex;
  justify-content: space-around;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
